<template>

  <a-layout class="layout-demo">
    <a-layout-sider
      theme="dark"
      breakpoint="lg"
      :width="220"
      collapsible
      :collapsed="collapsed"
      @collapse="onCollapse"
    >
      <div style="display: flex;align-items: center;justify-content: center;margin: 20px 0 ">
        <a-popover outline >
          <a-button v-if="!collapsed">仓储后台管理系统</a-button>
          <template #content>
            <p>为了合理实现联系人管理的场景我们组模拟了一个仓储管理系统模块</p>
          </template>
        </a-popover>
      </div>
      <a-menu
        :defaultOpenKeys="['1']"
        :defaultSelectedKeys="['0_2']"
        @menuItemClick="onClickMenuItem"
      >
        <a-menu-item key="/">
          <IconHome  size="large" />
          首页
        </a-menu-item>
        <a-menu-item key="/phoneDir">
          <IconIdcard size="large" />
          电话簿管理
        </a-menu-item>
        <a-menu-item key="0_3" size="large"  disabled>
          <IconRobotAdd size="large"/>
          供货商管理
        </a-menu-item>
        <a-menu-item key="0_4" size="large"  disabled>
          <IconUserGroup size="large" />
          经销商管理
        </a-menu-item>

      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout style="padding:5px">
          <div style="width: 100%;height: 100%;overflow: hidden;">
            <router-view style="background-color: #fff;padding: 10px"></router-view>
          </div>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import {useRouter} from "vue-router"
import {
  IconHome,
  IconIdcard,
  IconRobotAdd,
  IconUserGroup
} from '@arco-design/web-vue/es/icon'

export default defineComponent({
  components: {
    IconHome,
    IconIdcard,
    IconRobotAdd,
    IconUserGroup
  },
  setup() {
    let router = useRouter()
    const collapsed = ref(false)
    const onCollapse = (val, type) => {
      const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩'
      collapsed.value = val
    }
    return {
      collapsed,
      onCollapse,
      onClickMenuItem(key) {
        // Message.info({ content: `You select ${key}`, showIcon: true })
        router.push({
          path:key
        })
      }
    }
  }
})
</script>
<style scoped>
.layout-demo {
  height: 100vh;
  background: var(--color-fill-2);
}

.layout-demo :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}

.layout-demo :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}

.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}

.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}
</style>